<template>
  <div>
    <div style="padding: 20px; font-size: 18px">当前时间：{{ time_now }}
      <el-button type="primary" circle icon="el-icon-refresh" style="font-size: 16px" @click="reload_time" />
    </div>
    <div style="padding: 20px; font-size: 18px">当前时间戳(毫秒)：{{ time_stamp }}</div>
    <div class="time" style="padding: 20px">
      时间戳：
      <el-input v-model="timestamp" placeholder="请输入时间戳" class="ss" style="width: 200px" />
      <el-select v-model="stamp_type" placeholder="请选择" style="padding: 10px; width: 120px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="success" @click="change_time">>>转换</el-button>
      <el-input v-model="times_result" style="width: 200px; padding-left: 10px" />
      (北京时间)
    </div>
    <div class="time" style="padding: 10px">
      北京时间：
      <el-input v-model="times" placeholder="请输入北京时间" class="ms" style="width: 200px" />
      <el-select v-model="time_type" placeholder="请选择" style="padding: 10px; width: 120px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="change_stamp">>>转换</el-button>
      <el-input v-model="timestamp_result" style="width: 200px; padding-left: 10px" />
      (时间戳)
    </div>
  </div>
</template>

<script>
export default {
  name: "TimesView",
  data() {
    return {
      timestamp_result: "",
      times_result: "",
      timestamp: "",
      times: "",
      time_type: "s",
      time_now: "",
      time_stamp: "",
      stamp_type: "s",
      timer: null,
      options: [
        { value: 's', label: '秒(s)' },
        { value: 'ms', label: '毫秒(ms)' }
      ]
    }
  },
  created() {
    this.getNowTime()
    // 每秒去刷新当前时间
    // this.timer = setInterval(this.getNowTime, 1000);
  },
  methods: {
    getNowTime() {
      let now = ""
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      now = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      this.time_now = now
      const stamp = new Date(now)
      this.time_stamp = Date.parse(stamp)
    },
    timestampToTime(timestamp) {
      if (this.stamp_type === "s") {
        const date = new Date(timestamp * 1000);// 时间戳为10位需*1000
        const Y = date.getFullYear() + '-';
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        const D = date.getDate() + ' ';
        const h = date.getHours() + ':';
        const m = date.getMinutes() + ':';
        const s = date.getSeconds();
        return Y + M + D + h + m + s;
      } else {
        const date = new Date(timestamp * 1);// 时间戳为13位的话不需乘1000
        const Y = date.getFullYear() + '-';
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        const D = date.getDate() + ' ';
        const h = date.getHours() + ':';
        const m = date.getMinutes() + ':';
        const s = date.getSeconds();
        return Y + M + D + h + m + s
      }
    },
    change_time() {
      if (this.timestamp === "") {
        this.$message.error("请填写时间戳")
      } else {
        this.times_result = ""
        this.times_result = this.timestampToTime(this.timestamp)
      }
    },
    change_stamp() {
      this.timestamp_result = ""
      if (this.times === "") {
        this.$message.error("请填写北京时间")
      } else if (this.time_type === "s") {
        const time = new Date(this.times)
        this.timestamp_result = Date.parse(time) / 1000
      } else if (this.time_type === "ms") {
        const time = new Date(this.times)
        this.timestamp_result = Date.parse(time)
      }
    },
    reload_time() {
      this.getNowTime()
    },
  }
}
</script>

<style scoped lang="scss">

</style>
